<!--
 * @Author: linZeJian
 * @Date: 2022-08-24 10:53:55
 * @LastEditors: linZeJian
 * @LastEditTime: 2022-11-08 09:45:40
 * @Description: 
-->
<template>
  <div v-if="option.display">
    <uni-forms-item
      :label="option.label"
      :required="option.required"
      :rules="[{ required: option.required, errorMessage: '必填项不能为空' }]"
      :name="option.prop"
    >
      <uni-data-picker
        v-model="comValue"
        :placeholder="
          option.placeholder ? option.placeholder : '请选择' + option.label
        "
        :popup-title="
          option.placeholder ? option.placeholder : '请选择' + option.label
        "
        :style="detailValue ? 'pointer-events: none;' : ''"
        :disabled="detailValue"
        :localdata="option.dicData"
        :map="{ text: option.props.label, value: option.props.value }"
        @change="onchange"
        @nodeclick="onnodeclick"
      />
    </uni-forms-item>
  </div>
</template>

<script>
export default {
  name: "auni-cascader",
  props: {
    option: Object,
    value: [String, Number, Array],
  },
  data() {
    return {};
  },
  computed: {
    comValue: {
      get() {
        // console.log("this.option :>> ", this.option);
        // console.log("this.value :>> ", this.value);
        return this.value;
      },
      set(val) {
        // 触发value绑定值的交互与更新
        this.$emit("input", val);
      },
    },
    // 处理详情模式
    detailValue() {
      if (this.option.detail) {
        return true;
      } else {
        return false;
      }
    },
  },
  created() {},
  watch: {
    value: {
      deep: true,
      immediate: true,
      handler(newV) {},
    },
  },
  methods: {
    // 全部选项选择完毕后，触发
    onchange(e) {
      console.log("e", e);
      let selectedOptions = e.detail.value;
      // 处理返回值，是否全部路径showAllLevels: true，路径拼接符separator: "/",
      // console.log("selectedOptions", selectedOptions);
      this.show = false;
      // console.log('this.props', this.props);
      // let text = this.option.props.label;
      // 固定的"text"
      let text = "text";
      let showAllLevels = this.option.showAllLevels;
      let separator = this.option.separator || "/";
      if (showAllLevels) {
        this.comValue = selectedOptions
          .map((option) => option[text])
          .join(separator);
      } else {
        this.comValue = selectedOptions
          .map((option) => option[text])
          .join(separator);
        // this.comValue = selectedOptions.slice(-1)[0][text];
      }
      // console.log("this.comValue", this.comValue);
    },
    onnodeclick(node) {
      console.log("node", node);
    },
  },
};
</script>

<style></style>
